<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<h3><c:out value="${pageHeading}"></c:out> </h3> 
<div style="height: 15px;" class="questionnaire_submit_button"></div>
<form:form action="javascript:void(0)" dojoType="dijit.form.Form" commandName="questForm2"
	id="questionnaireForm" data-dojo-id="questionnaireForm">
	<ul > 
		<c:choose>
			<c:when test="${questForm2.userInfo.isCompany}">
				<li class="quest">
					<span>Company Name</span>
					<br> 
					<form:input data-dojo-type="dijit.form.TextBox" style= "width:300px;" path="userInfo.companyName"/></li><li class="quest">
					<span>Company Website</span>
					<br>
					<form:input data-dojo-type="dijit.form.TextBox" style= "width:300px;" path="userInfo.companyWebsite"/>
				</li>
			</c:when>
			<c:otherwise>
				<li class="quest">
					<span>First Name</span>
					<br> 
					<form:input data-dojo-type="dijit.form.TextBox" style= "width:300px;" path="userInfo.firstName"/></li><li class="quest">
					<span>Last Name</span>
					<br>
					<form:input data-dojo-type="dijit.form.TextBox" style= "width:300px;" path="userInfo.lastName"/>
				</li>
			</c:otherwise>
		</c:choose>
		<c:forEach var="question" items="${questions}" varStatus="status">
				<li class="quest">
					<span><c:out value="${question.questionDesc}"></c:out></span>
					<br>
					<input type="hidden" name="answers[${status.index}].questionId" value="${question.id}">
					<c:if test="${question.questionTypeName eq 'TEXT'}">
						<c:choose>
							<c:when test="${question.id eq 1011}">
								
								<input data-dojo-type="dijit.form.ComboBox"
								    data-dojo-props="store:stateStore, searchAttr:'name', hasDownArrow:false, onChange:addSubjectValues"
								    id="fieldInput" />
								   <a href="javascript:void(0)" id="addSubjField" style="text-decoration: none;" >Add</a> 
								  <br>
								  <ul id="subjectValues" style="margin-top: 15px;"></ul> 
								  <input id="subjectValuesInput" type="hidden" name="answers[${status.index}].answer" value="${questForm2.answers[status.index].answer}">
							</c:when>
							<c:when test="${question.id eq  255 }">
								<input data-dojo-type="dijit.form.ComboBox"
								    data-dojo-props="store:usStatesStore, searchAttr:'name',hasDownArrow:false"
								    name="answers[${status.index}].answer" style= "width:200px;"
								    id="fieldInput2" />
							</c:when>
							<c:when test="${question.id eq  254 }">
								<input data-dojo-type="dijit.form.TextBox"
								     name="answers[${status.index}].answer" style= "width:200px;"
								    id="fieldInput3" />
							</c:when>
							<c:when test="${question.id eq  256 }">
								<input data-dojo-type="dijit.form.TextBox"
								    name="answers[${status.index}].answer" style= "width:200px;"
								    id="fieldInput4" />
							</c:when>
							<c:otherwise>
								<textarea name="answers[${status.index}].answer"  
									required="true" data-dojo-type="dijit.form.Textarea" style= "width:500px;">${questForm2.answers[status.index].answer}</textarea>
							</c:otherwise>
						</c:choose>
					</c:if>
					<c:if test="${question.questionTypeName eq 'MULTI_SELECT'}" >
						<c:forEach var="option" items="${question.selectOptions}" varStatus="status2">
							<c:set var="contains" value="false" />
							<c:forEach var="optAns" items="${questForm2.answers[status.index].optionValues}">
							  <c:if test="${optAns eq option}">
							    <c:set var="contains" value="true" />
							  </c:if>
							</c:forEach>							
							<span style="display: block;"><input data-dojo-type="dijit.form.CheckBox" <c:if test="${contains}">checked='checked'</c:if>  type="checkbox" value="${option}" name="answers[${status.index}].optionValues"> <label>${option}</label></span>
						</c:forEach>				 
					</c:if>
					<c:if test="${question.questionTypeName eq 'SELECT_ONE'}" >
						<span style="display: block;">
							<c:forEach var="option" items="${question.selectOptions}" varStatus="status2">
								<c:set var="contains" value="false" />
								<c:forEach var="optAns" items="${questForm2.answers[status.index].optionValues}">
								  <c:if test="${optAns eq option}">
								    <c:set var="contains" value="true" />
								  </c:if>
								</c:forEach>							
								<span style="display: block;"><input data-dojo-type="dijit.form.RadioButton" <c:if test="${contains}">checked='checked'</c:if>  type="radio" value="${option}" name="answers[${status.index}].optionValues"> <label>${option}</label></span>
							</c:forEach>
						</span>
					</c:if>
				</li>
		</c:forEach>
		
	</ul>
	
	<div id="${isLinkedInUser ? '' : 'questionnaireSubmitButtonDiv'}" class="questionnaire_submit_button">
		<button style="margin-left: 60px; margin-top: 20px;"  type="submit" name="submit" value="submit" id="questionnaireFormButton" class="ui-action-tag action-primary"><span class="ui-action"><span class="ui-action-content">Submit</span></span></button>
	</div>
</form:form>
<c:if test="${!isLinkedInUser}">
	<form name="imageUploadForm" id="imageUploadForm" action="<%= com.google.appengine.api.blobstore.BlobstoreServiceFactory.getBlobstoreService().createUploadUrl("/profile/uploadImg.htm") %>" method="post" enctype="multipart/form-data">
		<ul style="padding: 0">
			<li class="quest">
				<span>Upload your Photo</span><br>
				<input id="image_input" type="file" name="myFile">  
				<c:if test="${imageAvailable ne null}">
				<span>
						We have a profile picture of yours. Submitting another one will delete existing image.
					</span>
			</c:if>
			</li>
			
			
		</ul>
	</form>
</c:if>	



<style>
	.bit-box{
		-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
border: 1px solid #CAD8F3;
background: #DEE7F8;
padding: 1px 5px 2px;
font: 11px "Lucida Grande", "Verdana";
list-style-type: none;
display: inline;
margin: 0 5px 4px 0;
	}
	.bit-box:HOVER{
		background: #BBCEF1;
		border: 1px solid 6D95E0;
	}
	.closebutton{
		margin-left: 15px;
		text-decoration: none;
		color: brown;
	}
	.closebutton:HOVER {
		text-shadow: 0 0 10px #c61a1a;
		color: white;
	}
</style>